<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>服务实例列表</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/admin/css/pearForm.css}"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <style type="text/css">
        body {
            /*background-color: #F2F2F2;*/
            /*margin: 10px;*/
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
        }
    </style>
</head>
<body>
<input type="hidden" th:value="${projectId}" id="projectId">
<div class="layui-container">
    <div class="layui-row">
        <table style="font-family: Roboto,serif;font-size: 15px"
               id="serviceListTable" lay-filter="serviceListTable"></table>
    </div>
</div>

<script type="text/html" id="barDemo">
    <!--    <a class="layui-btn  layui-btn-primary" lay-event="getDetail">实例详情</a>-->
    <!--    <a class="layui-btn layui-btn-primary" lay-event="syncAPI">同步API</a>-->
    <a class="layui-btn" lay-event="apiList">API列表</a>
</script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/admin/js/jquery.js}"></script>
<script th:src="@{/admin/js/util.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var ap = [[${ap}]];
    var pageURL = '/restdoc/serviceClient/list?type=' + ap;

    var projectId = $("#projectId").val();

    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#serviceListTable'
            , url: pageURL
            , size: 'lg'
            , skin: 'line'
            , cols: [
                [
                    {
                        field: 'applicationType', /*width: 180,*/ title: '应用类型'
                    },
                    {
                        field: 'service', /*width: 200,*/ title: '服务名称'
                    },
                    {
                        field: 'remoteAddress',/* width: 220,*/ title: '服务远程地址'
                    },
                    {
                        field: 'hostname', /*width: 180,*/ title: '主机名称'
                    },
                    {
                        field: 'osname', /*width: 180,*/ title: '运行操作系统'
                    },
                    {
                        field: 'serializationProtocol', /*width: 180,*/ title: '序列化协议'
                    },
                    {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                ]
            ]
        });

        table.on('tool(serviceListTable)', function (obj) {
            if (obj.event === 'getDetail') {

                layer.open({
                    type: 2,
                    title: '服务实例详情',
                    content: ['/restdoc/serviceClient/' + obj.data.id + '/view', 'no'],
                    area: ['600px', '400px']
                });

            } else if (obj.event === 'syncAPI') {
                var index = layer.load(2, {time: 10 * 1000});

                layer.close(index);
            } else if (obj.event === 'apiList') {

                var clientId = obj.data.id;

                layer.open({
                    type: 2,
                    title: 'API列表',
                    content: '/restdoc/serviceClient/' + obj.data.id + '/apiList/view',
                    area: ['600px', '400px'],
                    btn: ['同步API', '取消'],
                    yes: function (index, dom) {
                        var res = window["layui-layer-iframe" + index].getCheckApi();
                        var loadIndex = layer.load(1);

                        var syncDto = {
                            projectId: projectId,
                            docIds: res
                        };

                        $.ajax({
                            type: 'POST',
                            contentType: 'application/json;charset=utf-8',
                            url: '/restdoc/document/serviceClient/' + clientId + '/syncApi',
                            async: false,
                            data: JSON.stringify(syncDto),
                            success: function (data) {

                                if (data['code'] === "200") {
                                    layer.close(loadIndex);
                                    layer.alert('API总数量：<strong style="color: red">' + data['data']['totalQuantity'] + '</strong><br>已同步数量：<strong style="color: red">' + data['data']['savedQuantity'] + "</strong>",
                                        function (ai) {
                                            layer.close(ai);
                                            layer.close(index);
                                        });

                                } else {
                                    layer.msg(data['message']);
                                }
                            },
                            error: function () {
                                layer.msg("网络异常")
                            }
                        });

                    }
                });
            }
        });
    });
</script>
</body>
</html>